<template>
    <el-card shadow="hover" class="business-card">
        <div class="business-card-inner">
            <div class="business-cover-box">
                <img class="business-cover" :src="cover" alt=""/>
            </div>
            <div class="business-info">
                <div>
                    <el-icon>
                        <Shop/>
                    </el-icon>
                    <h2> {{ name }}</h2>
                </div>
                <div>
                    <el-icon>
                        <Location/>
                    </el-icon>
                    <h4>
                        {{ address }}
                    </h4>
                </div>
                <div>
                    <el-icon>
                        <Iphone/>
                    </el-icon>
                    <p>{{ phone }}</p>
                </div>
                <el-button type="primary" class="btn-buy" :icon="Shop" circle @click="chooseHandler"/>
            </div>

        </div>

    </el-card>
</template>

<script setup>

import {Iphone, Location, Shop} from "@element-plus/icons-vue";
import {unref} from "vue";

const emits = defineEmits(['ChoodsEvent']);
const props = defineProps({
    id: {type: String},
    name: {type: String},
    cover: {type: String},
    phone: {type: String},
    address: {type: String},
})

function chooseHandler() {
    emits("ChoodsEvent", {id: props.id,name:props.name});
}
</script>

<style scoped>
.business-cover, .business-cover-box {
    width: 300px;
    height: 200px;
    transition: 0.5s;
}

.business-cover-box {

}

.business-card {
    margin-top: 16px;
}

.business-card:hover .business-cover {
    transform: scale(1.5, 1.5);
}

.btn-buy {
    transition: 0.5s;
}

.business-card:hover .btn-buy {
    transform: rotate(360deg);
}

.business-card-inner {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.business-info {
    width: 100%;
    text-align: right;
}

.business-info > div {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
</style>